<template>
	<div>
		<Scroll class="wrap1" ref="sp">
			<div class="box">
				<!--轮播图-->
				 <Swiper v-if="pages.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
			        <Slide  v-for="(item,index) in pages" :key="index">	        	
			            <img :src="item"  class="cir"/>
			        </Slide>
			   </Swiper>
				<!--组件-->
				<div class="zone" v-for="item in imgcircle">
					<Dcircle :circlecont="item" :circlehide='circlehide'></Dcircle>
				</div>
				<!--猜你喜欢-->
				<div class="guess">
					<div class="top">
						<span></span> {{guess.title}}
						<span></span>
					</div>
					<div class="guess-l">
						<img :src="guess.lefturl" alt="" />
						<h3>{{guess.leftname}}</h3>
						<p>¥{{guess.leftprice}}</p>
					</div>
					<div class="guess-r">
						<img :src="guess.righturl" alt="" />
						<h3>{{guess.rightname}}</h3>
						<p>¥{{guess.rightprice}}</p>
					</div>
					
				</div>
				<!--加载更多-->
				<div class="more">加载更多</div>
			</div>
		</Scroll>
	</div>
</template>

<script>
	import Slide from "../../../base/ZSlide"
	import Swiper from "../../../base/ZSwiper"
	import Dcircle from "../D-goodsKing/circle/Dcircle"
	import Scroll from "../../../base/Scroll"

	export default {
		name: "Motherson",
		components: {
			Slide,
			Scroll,
			Dcircle,
			Swiper
		},
		created:function(){
			this.axios.post("/api/motherson").then(function(data){
//				console.log(data);
				this.pages = data.data.allArr.lunboArr;
				this.imgcircle = data.data.allArr.imgcircle;
				this.guess = data.data.allArr.guesslove;
			}.bind(this));
			
		},
		data() {
			return {
				circlehide: {
					bol: [true, false, false]
				},
				pages: [],
				imgcircle: [],
				guess:{}
				
			}
		}
	}
</script>

<style scoped>
	.wrap1 {
		overflow: hidden;
		height: 75vh;
		background: #f2f2f2;
	}
	/*轮播图*/
	.cir{
		width: 100%;
	}
	
	
	.box {
		width: 100%;
		background: #f2f2f2;
		margin-top: 1rem;
	}
	
	.zone {
		width: 90%;
		padding: 0 5%;
		background: white;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		margin-bottom: 1rem;
	}
	
	.guess {
		width: 94%;
		padding: 1rem 3%;
		overflow: hidden;
		background: white;
	}
	
	.top {
		width: 94%;
		margin: 0 auto;
		text-align: center;
		font-size: 1.5rem;
		padding: 0.5rem 0;
		color: #4d4d4d;
		font-weight: 200;
	}
	
	.top span {
		display: inline-block;
		width: 3rem;
		border: 0.05rem solid #ccc;
		vertical-align: middle;
	}
	.guess-l{
		float: left;
		width: 46%;
		text-align: center;
		border: 1px solid #ccc;
	}
	.guess-r{
		float: right;
		width: 46%;
		text-align: center;
		border: 1px solid #ccc;
	}
	.guess-l img{
		padding: 0.7rem 0;
		width: 57.5%;
		
	}
	.guess-r img{
		padding: 0.7rem 0;
		width: 100%;
		
	}
	.guess h3{
		font-weight: 400;
		font-size: 1.2rem;
		color: #4D4D4D;
	}
	.guess p{
		font-size: 1.2rem;
		color: #E53E42;
	}
	.more{
		width: 100%;
		font-size: 1.3rem;
		text-align: center;
		color: #808080;
		font-weight: 300;
		background: white;
		padding: 1.5rem 0;
	}
</style>